<template>
	<view style=" min-height:100vh;background-color: white;padding: 20rpx;padding-bottom: 40rpx;">
		<fui-form labelSize="26rpx" ref="form" labelWidth="190">
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="活动标题:">
				<fui-input size="26" v-model="formData.title" :borderBottom="false" :padding="[0]"
					placeholder="请输入活动标题"></fui-input>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="活动类型:">
				<fui-input size="26" v-model="formData.advetrType" disabled :borderBottom="false" @click="show=true"
					:padding="[0]" placeholder="请选择活动类型"></fui-input>
				<fui-picker linkage :layer="1" :options="options" title="请选择活动类型" :show="show" @change="change"
					@cancel="cancel"></fui-picker>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="活动地点:">
				<fui-input size="26" v-model="formData.location" :borderBottom="false" :padding="[0]"
					placeholder="请输入活动地点"></fui-input>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="活动时间:">

				<fui-input size="26" v-model="formData.time" disabled :borderBottom="false" @click="timeShow=true"
					:padding="[0]" placeholder="请选择活动时间"></fui-input>


				<fui-date-picker :show="timeShow" type="5" @change="timeChange" @cancel="timeCancel"></fui-date-picker>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="招募人数">
				<view class="flex">
					<view style="border-right:1rpx solid #000;">
						<fui-input size="26" type="number" :disabled="formData.noPersonNum" v-model="formData.PersonNum"
							:borderBottom="false" :padding="[10,5,10,10]" placeholder="请输入招募人数"
							textAlign="right"></fui-input>
					</view>
					<view style="padding-left:15rpx;width: 50%;">
						<text :style="{color:(formData.noPersonNum?'#000':'#ccc')}">不限</text>
						<checkbox style="transform: scale(0.7,0.7);" v-model="formData.noPersonNum"
							:checked="formData.noPersonNum" @click="changeNoPersonNum(e)"></checkbox>
					</view>
				</view>

			</fui-form-item>
			<fui-form-item bottomBorder :padding='["30rpx",0]' label="报名起止日期:">

				<fui-input size="26" v-model="formData.startStop" disabled :borderBottom="false" @click="dataShow=true"
					:padding="[0]" placeholder="报名起止日期"></fui-input>


				<fui-date-picker range :show="dataShow" type="3" @change="dataChange"
					@cancel="dataCancel"></fui-date-picker>
			</fui-form-item>

			<fui-form-item :padding='["30rpx",0]' bottomBorder label="报名要求:">
				<template v-slot:vertical>
					<fui-textarea size="26" maxlength="-1" :padding="['32rpx','0rpx']" :border-bottom="false"
						:border-top="false" placeholder="请输入报名要求..." v-model="formData.demand"></fui-textarea>
				</template>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="活动须知:">
				<template v-slot:vertical>
					<fui-textarea size="26" maxlength="-1" :padding="['32rpx','0rpx']" :border-bottom="false"
						:border-top="false" placeholder="请输入活动须知..." v-model="formData.descr"></fui-textarea>
				</template>
			</fui-form-item>


			<fui-form-item :padding='["30rpx"," 0rpx","100rpx","0rpx"]' :bottomBorder="false" :labelWidth="280"
				label="是否有转发奖励:">
				<fui-radio-group name="radio" @change="checked">
					<view class="fui-list__item flex">


						<view class="fui-align__center">
							<fui-radio color="#FFDD00" value="0" :checked="gender==0"></fui-radio>
							<text class="fui-text">没有</text>
						</view>


						<view class="fui-align__center">
							<fui-radio color="#FFDD00" value="1" :checked="gender==1"></fui-radio>
							<text class="fui-text">有</text>
						</view>

					</view>
				</fui-radio-group>

			</fui-form-item>
			<fui-form-item :padding='["30rpx"," 0rpx","100rpx","0rpx"]' :bottomBorder="false" label="转发奖励:"
				v-if="gender==1">
				<view class="flex" style="justify-content: space-between;">
					<view class="flex" style="width: 48%;">
						<fui-input size="26" :borderBottom="false" :padding="['20rpx','0rpx']" type="number"
							placeholder="请输入"><text>币/浏览</text></fui-input>
					</view>
					<view class="flex" style="width: 48%;">
						<fui-input size="26" :borderBottom="false" :padding="['20rpx','0rpx']" type="number"
							placeholder="请输入"><text>币/成交</text></fui-input>
					</view>
				</view>
			</fui-form-item>

		</fui-form>
		<view class="saveBtns">
			<view style="width: 90vw; display: inline-block;">
				<fui-button background="#FFDD00" width="100%" height="70rpx" color="#000" class="saveBtn"
					@click="submitOrder">提交发布</fui-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					demand: '',
					startStop: '',
					PersonNum: null,
					noPersonNum: false,
					time: '',
					location: '',
					advetrType: '',
					title: '',
					formOrder: 'activity',
					rewards: 0, //是否有转发奖励
					bargain: 0, //成交
					browse: 0, //浏览
					descr: '',
				},
				timeShow: false,
				reportShow: false,
				dataShow: false,
				gender: 0,
				show: false,
				options: [{
					text: '相亲活动',
					value: 1
				}, {
					text: '交友联谊',
					value: 2
				}, {
					text: '主题沙龙',
					value: 3
				}, {
					text: '线上活动',
					value: 4
				}],

				//上传接口地址
				url: 'https://ffa.firstui.cn/api/example/upload-file',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的视频地址列表
				imgUrls: [],

				form: null,
				imgUpload: null,
			};
		},
		methods: {
			submitOrder() {
				console.log('表单', this.formData);

				// demand: '',
				// startStop: '',
				// PersonNum: null,
				// noPersonNum: false,
				// time: '',
				// location: '',
				// advetrType: '',
				// title: '',
				// formOrder: 'activity',
				// rewards: 0, //是否有转发奖励
				// bargain: 0, //成交
				// browse: 0, //浏览
				// descr: '',

				if (!this.formData.title) {
					this.$common.showToast("请输入活动标题");
					return
				}
				if (!this.formData.advetrType) {
					this.$common.showToast("请选择活动类型");
					return
				}
				if (!this.formData.location) {
					this.$common.showToast("请输入活动地点");
					return
				}
				if (!this.formData.time) {
					this.$common.showToast("请选择活动时间");
					return
				}
				if (!this.formData.noPersonNum && !this.formData.PersonNum) {
					this.$common.showToast("请输入招募人数");
					return
				}
				if (!this.formData.demand) {
					this.$common.showToast("请输入活动要求");
					return
				}
				if (!this.formData.descr) {
					this.$common.showToast("请输入活动须知");
					return
				}

				this.$httpost('/Form/submitOrder', this.formData).then(res => {
					this.$common.showToast("活动发布成功");
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
				})
			},
			timeChange(e) {
				this.timeShow = false
				console.log(e)

				this.formData.time = e.result
			},
			timeCancel() {
				this.timeShow = false
			},
			reportChange(e) {
				this.reportShow = false
				console.log(e)

				this.formData.reportData = e.result
			},
			reportCancel() {
				this.reportShow = false
			},
			changeNoPersonNum(e) {
				this.formData.noPersonNum = !this.formData.noPersonNum
				// console.log(this.formData.noPersonNum)
				if (this.formData.noPersonNum) {
					this.formData.PersonNum = null
				}
			},
			dataChange(e) {
				this.dataShow = false
				console.log(e)

				this.formData.startStop = `${e.startDate.result} 至 ${e.endDate.result}`
			},
			dataCancel() {
				this.dataShow = false
			},
			change(e) {
				this.show = false
				this.formData.advetrType = e.text
				console.log(e)
			},
			cancel() {
				this.show = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.fui-btn__box {
		margin-top: 20rpx;

	}

	.saveBtns {
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0%;
		right: 0%;
		text-align: center;
	}

	.fui-align__center {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.fui-text {
		margin-left: 10rpx;
	}

	::v-deep .fui-uploadv__del-wrap {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-uploadv__item {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-upload__video {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	.uni-form-item {
		padding: 15px 0;
	}

	.title {
		margin-bottom: 10px;
	}

	.group-item {
		flex-direction: row;
		margin-right: 20px;
	}

	.btn {
		flex: 1;
	}

	.btn-submit {
		margin-right: 5px;
	}

	.btn-reset {
		margin-left: 5px;
	}

	.result {
		margin-top: 30px;
	}

	.formItem {
		background-color: white;
		padding: 20rpx;
	}
</style>